<template>
  <back-frame-work>
    <div>
      <div style="width: 100%;background-color: white;display: flex;justify-content: center;align-items: center">
        <div style="width: 94%;margin-top: 40px;margin-bottom: 40px;">
          <div style="width: 100%;height: 180px;display: flex;justify-content: center;border-bottom: #e7e7e7 solid 1px">
            <div style="width: 650px;height: 150px;display:flex;">
              <div style="width: 30%;height: 100%;display: flex;align-items: center;justify-content: center">
                <img src="~assets/img/payment.png">
              </div>
              <div style="width: 70%;height: 100%;">
                <div style="height: 70%;width: 100%;display: flex;align-items: center">
                  <span style="font-size: 26px;margin-top: 40px;">完成付款，您的宝贝正在发货当中........</span>
                </div>
                <div style="height: 30%;width: 100%;">
                  <span style="font-size: 14px;">请注意查看物流状态哦</span>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;border-bottom: #e7e7e7 solid 1px;">
            <div style="margin-top: 30px;margin-bottom: 40px;display: flex">
              <div style="width: 15%;"></div>
              <div style="width: 85%;">
                <div style="width: 100%;height: 40px;font-size: 14px;display: flex;">
                  <div style="width: 30%;height: 100%;display: flex;align-items: center">{{content.contName}}</div>
                  <div style="width: 35%;height: 100%;display: flex;align-items: center">{{content.contPhone}}</div>
                  <div style="width: 35%;height: 100%;display: flex;align-items: center">
                    {{content.areaAdress[0]}}&nbsp;
                    {{content.areaAdress[1]}}&nbsp;
                    {{content.areaAdress[2]}}&nbsp;
                    {{content.careAdress}}
                  </div>
                </div>
                <div v-for="item in content.comMsg" style="width: 100%;display: flex;justify-content: space-between;font-size: 14px;">
                  <div style="width: 280px;height: 50px;">
                    <div style="width: 196px;height: 50px;display: flex;align-items: flex-end">
                    <span>
                      {{item.currentSerName}}
                      {{item.currentColor}}
                      {{item.currentConfig}}
                    </span>
                    </div>
                  </div>
                  <div style="width: 337px;height: 50px;display: flex;align-items: flex-end">
                    <span>服务: {{item.serviceMsg}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 100%;height: 100px;border-top: #e7e7e7 solid 1px">
            <div style="width: 100%;height: 30px"></div>
            <div style="width: 100%;height: 70px;">

            </div>
          </div>
          <div>
            <div><i class="el-icon-notebook-2"></i>查看订单详细</div>
          </div>
        </div>
      </div>
    </div>
  </back-frame-work>
</template>

<script>
  import {mapGetters} from "vuex"

  import BackFrameWork from "../../components/content/personController/BackFrameWork";

  export default {
    name: "PaymentChild",
    data(){
      return {
        content: {}
      }
    },
    components: {
      BackFrameWork
    },
    computed: {
      ...mapGetters({
        "getData": "Order/getManyDataByOrderId"
      })
    },
    methods: {
    },
    created() {
      //接收路由过来的订单编号
      let orderId = this.$route.query.orderId;
      //向vuex请求数据
      this.content = this.getData(orderId);
      //刷新订单显示数据，刷新只需要清空订单的session就行了
      sessionStorage.removeItem("Order");
    }
  }
</script>

<style scoped>

</style>
